body{
  background: #f2f2f2;
}
.left-menu-box{
  display: block;
  width: 180px;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  transition: width .2s ease,left .2s ease;
  z-index: 9;
  .inner{
    width: 100%;
    top: 60px;
    left: 0;
    position: absolute;
    bottom: 0;
    background: #fff;
  }
  .menu-list{
    width: 100%;
    margin:0;
    a.btn{
      padding:15px 0 10px 20px;
      box-shadow:none !important;
      border-radius: 0 !important;
      background: #fff;
      text-align: left;
      i{
        margin-right:20px;
        transition: margin .2s ease;
        width: 20px;
        display: inline-block;
        text-align: center;
      }
      .icon-arrow{
        margin-left: 30px;
        vertical-align: -moz-middle-with-baseline;
      }
      span{
        width: 60px;
        height: 24px;
        overflow: hidden;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        line-height: 21px;
      }
    }
    a.btn.active,a.btn:hover,a.btn:focus{
      background: #F3F9FD !important;
      border-left: 4px solid #409EEF;
      padding-left:16px;
      i,span{
        color:#409EEF;
      }
    }
  }
}
.left-menu-box.active{
  left:0;
}
.body-box{
  margin-left: 180px;
  transition: margin-left 0.2s ease;
  margin-top: 59px;
  background: #f2f2f2;
}
.categories-box{
  padding: 0 10px 0 0;
  height: 0;
  overflow: hidden;
  margin-left: 20px;
  a{
    color: #555;
    display: block;
    padding: 5px 0;
    position: relative;
    width: 100%;
    height: 35px;
    overflow: hidden;
    line-height: 35px;
    font-size: 13px;
  }
  a.focus,a:hover,a.active{
    color:#409EEF;
  }
}
.categories-box.active{
  height: auto;
}
@media (max-width: 1199px) {
  .left-menu-box .inner{
    top:50px;
  }
  .body-box{
    margin-top: 49px;
  }
}
@media (max-width: 768px) {
  .left-menu-box .inner{
    top:50px;
  }
  .left-menu-box{
    left: -180px;
  }
  .body-box{
    margin-left:0;
  }
}